<template>
  <div class="dept">
    <!-- Main Wrapper -->
    <div class="main-wrapper">
      <Header/>
      <SideBar/>
      <!-- Page Wrapper -->
      <div class="page-wrapper"><!-- :is="currentView" -->
        <div class="content container-fluid">
          <BreadCrumb/>
          <br><h2>部门管理</h2>

      <el-main class="system">

        部门
        <el-select v-model="dchoice_deptid" filterable placeholder="请选择">
          <el-option
            v-for="item in doptions"
            :key="item.value"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
        &nbsp;
        <el-button @click="clearItems">Clear</el-button>
        &nbsp;
        <el-button type="primary" @click="queryAllDeptToShow">查询</el-button>
        <div class="ends" >
            <br>
            <el-button type="primary" @click="newDeptFunc">部门新增</el-button>
		</div>
      </el-main>

    <el-table :data="tableData" border style="width: 100%"> <!--height="250"-->
        <el-table-column prop="deptName" label="部门" style="width: 40%"></el-table-column>
        <el-table-column prop="chairmen_name" label="部门负责人" style="width: 40%"></el-table-column>
        <el-table-column label="操作" style="width: 20%">
            <template slot-scope="scope">
                <el-button @click="updateHandleClick(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="delFunc(scope.row,scope.$index,tableData)" type="text" size="small">删除</el-button>
                <!-- @click="handleClick(scope.row,scope.$index,tableData)" -->
            </template>
        </el-table-column>
    </el-table>
    <el-col :span="24" class="xtes">
        <el-col :span="24" >
        <div class="xtesbox">
        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    class
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination></div>
        </el-col>
    </el-col>

    <el-dialog
	  title="部门新增"
	  :visible.sync="dialogVisible"
	  width="40%"
	  >
      <span class="content-b">部门名称</span><el-input v-model="newDept" placeholder="新增部门名称" size="medium"></el-input><br>
      <el-button type="primary" @click="addDept">保存</el-button>
    </el-dialog>

<el-dialog
  title="Tip"
  :visible.sync="delDialogVisible"
  width="30%"
  :before-close="delHandleClose">
  <span>确认删除<font style="color: blue">{{del_dept_name}}</font>部门？(Are you sure to delete it?)</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="delDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="delDept">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="部门信息修改"
  :visible.sync="delDialogVisible2"
  width="30%">
  <span class="content-b">部门名称</span><el-input v-model="upd_dept_name" placeholder="新增部门名称" size="medium"></el-input><br>
  部门负责人：<el-select v-model="upd_leader_id" filterable placeholder="请选择">
          <el-option
            v-for="item in leader_options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="delDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="amendDept">确 定</el-button>
  </span>
</el-dialog>

        </div>
      </div>
      <!-- /Page Wrapper -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import BreadCrumb from '@/components/Breadcrumb'
import Header from '@/components/Header'
import SideBar from '@/components/SideBar'
export default {
  created(){
      this.queryAllDeptToShow()
      this.queryDeptForDropDownList()
  },
  beforeDestroy(){
  },
  mounted(){
  },
  data(){
      return {
		currentPage: 1,
		pageSize: 10,
		total: 0,
        tableData:[],
        // 查询条件、下拉框
        dchoice_deptid: '',
        doptions: [],
        dialogVisible: false,
        // 新增部门
        newDept: '',
        delDialogVisible: false,
        // 删除部门
        del_dept_id: '',
        del_dept_name: '',
        // 修改部门
        delDialogVisible2: false,
        upd_dept_id: '',
        upd_dept_name: '',
        upd_leader_id: '',
        leader_options: [],
      }
  },
  methods: {
      // 查询所有部门/(系)信息
      queryAllDeptToShow(){
        let config = {
            method: 'post',
            url: 'edu/admin/deptQuery',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                deptId: this.dchoice_deptid===''?'':this.dchoice_deptid
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.tableData=response.data.page.list
                this.total=response.data.page.totalCount
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 下拉框查询部门信息
      queryDeptForDropDownList(){
        let config = {
            method: 'get',
            url: 'edu/admin/dept'
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.doptions=response.data.deptList
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      newDeptFunc(){
          this.newDept = ''
          this.dialogVisible = true
      },
      // 新增部门
      addDept(){
        let config = {
            method: 'post',
            url: 'edu/admin/dept',
            params: {
                deptName: this.newDept
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.dialogVisible = false
                this.queryAllDeptToShow()
                this.queryDeptForDropDownList()
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      delHandleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      delFunc(row, index,tabledata){
          // 有了row其实就不需用index咖tabledata去获取deptId和deptName了
        //   tabledata.splice(index,1) // 删除当前这一行
        this.delDialogVisible = true
          this.del_dept_id = row.deptId
          this.del_dept_name = row.deptName
      },
      // 删除部门
      delDept(){
        let config = {
            method: 'delete',
            url: 'edu/admin/dept',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                deptId: this.del_dept_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.queryAllDeptToShow()
                this.queryDeptForDropDownList()
                this.delDialogVisible = false
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 修改部门信息
      amendDept(){
        let config = {
            method: 'put',
            url: 'edu/admin/dept',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                deptId: this.upd_dept_id,
                deptName: this.upd_dept_name,
                staff_no: this.upd_leader_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.queryAllDeptToShow()
                this.delDialogVisible2 = false
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 分页查询相关功能函数
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryAllDeptToShow()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.queryAllDeptToShow();
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(data) {
        console.log('获取row', data)
        // 当前多选的数据
        this.multipleSelection = data;
      },
      updateHandleClick(row){
          this.upd_dept_id = row.deptId
          this.upd_dept_name = row.deptName
          this.delDialogVisible2 = true
          this.teacherDropDownList()
          this.upd_leader_id = row.chairman_tno
      },
      // 清除查询条件
      clearItems(){
          this.dchoice_deptid = ''
      },
      // Teacher下拉框
      teacherDropDownList(){
        let config = {
            method: 'get',
            url: 'edu/admin/tea_list',
            headers: {
                "Content-Type": "application/json;"
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.leader_options = response.data.list
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      }
  },
  components: {
	Header,
    BreadCrumb,
	  SideBar
  }
}
</script>

<style>
.account{
    width: 200px;
    height: 35px;
    margin-bottom: 20px;
    padding-left: 10px;
}
.xtes {
    margin-top: 20px;
    margin-bottom: 20px;
}
.xtesbox{
    float: right;
    padding-right: 150px;
}
.system {
    background-color: #fff;
    border-radius: 0 0 15px 15px;
    font-size: 18px;
}
.ends {
    margin-bottom: 20px;
}
</style>